import React, { useEffect } from 'react'
import { Button, Form, Modal, Select, InputNumber } from 'antd'
import TextArea from 'antd/es/input/TextArea'

function Edit(props) {
  const [options, setOptions] = React.useState([])
  const [defaultValue] = React.useState({})

  async function getProjects() {
    let res = await window.electron.ipcRenderer.invoke('project-list')
    setOptions(res.map(item => {
      return {
        value: item.id,
        label: item.name
      }
    }))
  }

  const [form] = Form.useForm();

  useEffect(() => {
    if (props.visible) {
      getProjects()
      form.setFieldsValue(props.current)
    }
  }, [props.visible])

  function onFinish(values) {
    let data = Object.assign(props.current, values)
    props.onSave(data)
  }

  return (
    <Modal open={props.visible} onCancel={props.onCancel} title={'编辑'} footer={null}>
      <Form onFinish={onFinish} initialValues={defaultValue} form={form}>
        <Form.Item label={'项目'} name={'projectId'}>
          <Select options={options} disabled={true} className={'w-30'}/>
        </Form.Item>
        <Form.Item label={'工时'} name={'time'}>
          <InputNumber addonAfter={'小时'} min={0} />
        </Form.Item>
        <Form.Item label={'内容'} name={'content'}>
          <TextArea />
        </Form.Item>
        <Form.Item label={null} className={'text-right'}>
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default Edit
